<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- 主页样式 -->
    <link rel="stylesheet" href="css/index.css">
    <!-- 头像样式 -->
    <link rel="stylesheet" href="css/tx.css">
    <!-- 壁纸切换样式 -->
    <link rel="stylesheet" href="css/style.css">
    <!-- 落叶特效样式 -->
    <link rel="stylesheet" href="css/lrtk.css">
    <script type="text/javascript" src="js/yezi.js"></script>

    <style>
        body {
            background: url(../images/timg2.jpg) no-repeat fixed;
            background-size: cover;
            width: 100%;
        }
    </style>

</head>

<body>


    <!-- 代码 开始 -->
    <!-- 落叶特效 -->
    <div id="botAgregar"></div>
    <script
        type="text/javascript">$.AutomLeafStart({ leafsfolder: "yezi/", howmanyimgsare: 8, initialleafs: 10, maxYposition: -10, multiplyclick: true, multiplynumber: 2, infinite: true, fallingsequence: 6000 }); $("#botAgregar").on("click", function () { $.AutomLeafAdd({ leafsfolder: "yezi/", add: 8, }) });</script>

    <!-- 代码 结束 -->


    <div class="container">
        <!-- 头部 -->
        <div class="row" style="margin-top: 0.5rem; position: fixed; margin-left: 6.9rem;z-index: 1;">
            <div class="col-sm"></div>
            <div class="col-sm">
                <!-- 宽为50rem -->
                <div class="card" style="width: 50rem; background:rgba(252, 250, 244, 0.80);">
                    <div class="card-header-1">
                        <div class="row" style="font-family: cursive;">

                            <h4
                                style="position: absolute; left: 0.5rem; margin-top: 0.5rem; color: rgb(77, 161, 77); font-family:cursive;">
                                敦煌---微说说</h4>

                            <!-- 头像框 -->
                            <div class="box" style="z-index: 1; margin-top: 3rem; margin-left: 2rem;">
                                <div class="ft_img" id="ft_img">
                                    <img src="images/www.17qq.jpg" style="width: 6rem; height: 6rem;" class="t_img" />
                                </div>
                                <div class="s_box" id="sbox">
                                    <div class="header">
                                        <p>设置头像</p>
                                        <span class="close" id="close">x</span>
                                    </div>
                                    <hr width="80%" color="#e0e0eb" />
                                    <div id="t_img">
                                        <img src="images/lisa001.jpeg" alt="">
                                        <img src="images/lisa002.jpeg" alt="">
                                        <img src="images/lisa003.jpeg" alt="">
                                        <img src="images/lisa004.jpeg" alt="">
                                        <img src="images/lisa005.jpeg" alt="">
                                        <img src="images/lisa006.jpeg" alt="">
                                        <img src="images/lisa007.jpeg" alt="">
                                        <img src="images/lisa008.jpeg" alt="">
                                        <img src="images/lisa009.jpeg" alt="">
                                        <img src="images/lisa010.jpeg" alt="">
                                        <img src="images/lisa010.jpeg" alt="">
                                        <img src="images/lisa011.jpeg" alt="">
                                        <img src="images/lisa012.jpeg" alt="">
                                        <img src="images/lisa013.jpeg" alt="">
                                        <img src="images/lisa014.jpeg" alt="">
                                        <img src="images/lisa015.jpeg" alt="">
                                        <img src="images/lisa0010.jpeg" alt="">
                                        <img src="images/www.17qq.jpg" alt="">
                                    </div>
                                    <hr width="80%" color="#e0e0eb" />
                                    <div class="bt_box">
                                        <input type="file" name="file0" id="file0" accept="image/*" />
                                        <a class="gb" href="javascript:" id="hide">关闭</a>
                                        <a class="queren" href="javascript:" id="but">保存头像</a>
                                    </div>
                                </div>
                            </div>

                            <!-- 用户名样式 -->
                            <div class="col-sm-7 d-flex justify-content">
                                <p>{{username}}</p>
                            </div>
                            <!-- 按钮组件 -->
                            <div class="col-sm-5 d-flex justify-content-end ">
                                <button type="button" class="btn btn-secondary btn-sm shadow" data-toggle="modal"
                                    data-target="#closeAccount">注销</button>
                            </div>
                            <!-- 按钮组件 -->
                            <div class="col-sm-6 d-flex justify-content-start">
                                <button type="button" class="btn btn-success btn-sm" data-toggle="modal"
                                    data-target="#saysomething">发表说说</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm">

            </div>
        </div>

        <!-- 说说框 -->
        <div class="row" style="font-family: cursive; height: 100%; ">
            <div class="col-sm">

            </div>
            <div class="col-sm" id="saysaymsg" style="margin-top: 13rem;">
                {% for msg in msgs %}
                <div class="card border-primary shadow">
                    <div class="card-header" style="height: 6rem;">
                        <div class="row">
                            <!-- 头像框 -->
                            <div class="user-info">
                                <a class="user-home" type="file" onclick="my_photo()">
                                    <img class="user-avatar-1" src="images/lisa008.jpeg" alt="您的头像">
                                </a>
                            </div>
                            <div class="col-sm-10">{{msg.content}}</div>

                            <!-- 在html代码中写入类型为button类型按钮，并给一个id名为praise -->
                            <input class="give" type="button" id="praise" value="赞(0)">

                            <div class="col-sm-2">
                                <button type="button" class="btn btn-success btn-sm" data-toggle="modal"
                                    data-target="#comment" onclick="sayComment('{{msg.id}}')">吐槽一下</button>
                            </div>
                        </div>

                    </div>


                    <!-- 评论框 -->
                    <details style="list-style-type: none;">
                        <summary style="outline: none; margin-left: 1.5rem;">展开评论</summary>
                        <div class="card-body">
                            <ul class="list-group list-group-flush" id="{{msg.id}}">
                                {% for comment in msg.comments %}
                                <li class="list-group-item" style="background:rgba(252, 250, 244, 0.030)">
                                    <blockquote class="blockquote mb-0">
                                        <p>{{comment.content}}</p>
                                        <footer class="blockquote-footer" style="color: black;">
                                            <cite title="Source Title">{{comment.comUserName}}</cite>&nbsp;&nbsp;对
                                            <cite title="Source Title">{{msg.msgUserName}}</cite>&nbsp;&nbsp;说
                                        </footer>
                                    </blockquote>
                                </li>
                                {% endfor %}
                            </ul>
                        </div>
                    </details>
                </div>
                {% endfor %}
            </div>

            <div class="col-sm">

            </div>
        </div>
    </div>

    <!-- 注销  -->
    <div class="modal fade" id="closeAccount" data-backdrop="static" data-keyboard="false" tabindex="-1"
        style="font-family: cursive; height: 40rem;" aria-labelledby="closeAccountLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="closeAccountLabel">注销</h3>
                </div>
                <div class="modal-body center" style=" margin-top: 1rem; color:crimson;">
                    <div class="form-group" style="text-align: center;">
                        <label for="exampleFormControlTextarea1">
                            <h4>是否注销当前账户!</h4>
                        </label>
                    </div>
                </div>
                <!-- 按钮组件 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" style="width: 6rem;" onclick="logout()">确认注销</button>
                    <button type="button" class="btn btn-success" style="width: 6rem;" data-dismiss="modal">再想想</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 发表说说  -->
    <div class="modal fade" id="saysomething" tabindex="-1" style="font-family: cursive; margin-top: 12rem;"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">发表说说</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="sayMsg">说点儿什么吧...</label>
                            <textarea class="form-control" id="sayMsg" rows="3"></textarea>
                        </div>
                    </form>
                </div>
                <!-- 按钮组件 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" style="width: 6rem;"
                        data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-success" style="width: 6rem;" data-dismiss="modal"
                        onclick="saysay()">发表</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 吐槽一下 -->
    <div class="modal fade" id="comment" tabindex="-1" style="font-family: cursive; margin-top: 12rem;"
        aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">评论一下</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="exampleFormControlTextarea1">吐槽点儿什么吧...</label>
                            <textarea class="form-control" id="commentMsg" rows="3"></textarea>
                        </div>
                    </form>
                </div>
                <!-- 按钮组件 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" style="width: 6rem;"
                        data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-success" style="width: 6rem;" data-dismiss="modal"
                        onclick="comment()">吐槽</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 壁纸切换 -->
    <div id="div_NetMonitor">
        <div id="div_netMon1" onclick="checkNet1()"><img src="../images/timg2.jpg"></div>
        <div id="div_netMon2" onclick="checkNet2()"><img src="../images/timg3.jpg"></div>
        <div id="div_netMon3" onclick="checkNet3()"><img src="../images/timg4.jpg"></div>
        <div id="div_netMon4" onclick="checkNet4()"><img src="../images/timg5.jpg"></div>

        <div id="div_netMon5">Wallpaper</div>

        <div id="div_netMon6" title="Wallpaper" onclick="checkWallpaper()">
            <svg t="1590074189701" class="icon-suspension" id="icon-sus1" viewBox="0 0 1000 1000" version="1.1"
                p-id="1773" width="200" height="200">
                <path
                    d="M500 0c-276.1563 0-500 223.8438-500 500s223.8438 500 500 500 500-223.8438 500-500-223.8438-500-500-500zM500 906.25c-224.375 0-406.25-181.875-406.25-406.25s181.875-406.25 406.25-406.25 406.25 181.875 406.25 406.25-181.875 406.25-406.25 406.25zM794.1875 455.8125l-250-250c-24.4063-24.4063-63.9688-24.4063-88.375 0s-24.4063 63.9688 0 88.375l143.3125 143.3125h-349.125c-34.5313 0-62.5 27.9688-62.5 62.5s27.9688 62.5 62.5 62.5h349.125l-143.3125 143.3125c-24.4063 24.4063-24.4063 63.9688 0 88.4063 12.2188 12.1875 28.1875 18.3125 44.1875 18.3125s32-6.0938 44.1875-18.3125l250-250c24.4063-24.4063 24.4063-63.9688 0-88.375z"
                    fill="#1571fa" p-id="1774"></path>
            </svg>
            <svg t="1590076234376" class="icon-suspension" id="icon-sus2" viewBox="0 0 1000 1000" version="1.1"
                p-id="5476" width="200" height="200">
                <path
                    d="M500 0c276.1563 0 500 223.8438 500 500s-223.8438 500-500 500-500-223.8438-500-500 223.8438-500 500-500zM500 906.25c224.375 0 406.25-181.875 406.25-406.25s-181.875-406.25-406.25-406.25-406.25 181.875-406.25 406.25 181.875 406.25 406.25 406.25zM205.8125 455.8125l250-250c24.4063-24.4063 63.9688-24.4063 88.375 0s24.4063 63.9688 0 88.375l-143.3125 143.3125h349.125c34.5313 0 62.5 27.9688 62.5 62.5s-27.9688 62.5-62.5 62.5h-349.125l143.3125 143.3125c24.4063 24.4063 24.4063 63.9688 0 88.4063-12.2188 12.1875-28.1875 18.3125-44.1875 18.3125s-32-6.0938-44.1875-18.3125l-250-250c-24.4063-24.4063-24.4063-63.9688 0-88.375z"
                    p-id="5477" fill="#1571fa"></path>
            </svg>
        </div>
    </div>


    <!-- 导入jQuery -->
    <script src="js/jquery-3.5.1.min.js"></script>
    <!-- 导入Bootstrap的js文件 -->
    <script src="js/bootstrap.min.js"></script>
    <!-- 导入axios -->
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <!-- 头像 -->
    <script src="js/tx.js"></script>
    <!-- 点赞 -->
    <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <!-- 展开 -->
    <!-- <script src="js/open.js"></script> -->
    <!-- 壁纸切换 -->
    <script src="js/FormValidator.js"></script>
    <!-- 功能实现 -->
    <script src="../static/js/model_index.js"></script>

    <!-- 点赞 -->
    <script type="text/javascript">
        function zan() {
            var number = 0;
            return function () {
                this.value = "赞(" + (++number) + ")";
            }
        }
        var zz = zan();
        document.getElementById('praise').onclick = zz;
    </script>


</body>

</html>